@import "config";

// 文字大小
.mini {
  font-size: $font-mini;
}
.small {
  font-size: $font-small;
}
.normal {
  font-size: $font-normal;
}
.large {
  font-size: $font-large;
}

// 文字颜色
.red {
  color: $red;
}
.yellow {
  color: $yellow;
}
.green {
  color: $green;
}
.black {
  color: $black;
}
.white {
  color: white;
}
.grey {
  color: $grey;
}

.grey1 {
    color: $grey1;
  }
.orange {
  color: $orange;
}
.light-black {
  color: $lightBlack;
}
.shallow-grey {
  color: $shallow-grey;
}

// 文字样式
.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}

// 背景颜色
.bg {
  background-color: $white;
}
.bg-red {
  background-color: $red;
}
.bg-yellow {
  background-color: $yellow;
}
.bg-green {
  background-color: $green;
}
.bg-black {
  background-color: $black;
}
.bg-white {
  background-color: white;
}
.bg-grey {
  background-color: $grey;
}

// display类
.flex {
  display: flex;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}

// position类
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.z-index {
  z-index: 1;
}
.z-10 {
  z-index: 10;
}
.z-100 {
  z-index: 100;
}
.z-1000 {
  z-index: 1000;
}

// 宽度
.width-full {
  width: 750rpx;
}
.width-block {
  width: 690rpx;
}
.width-cent-100 {
  width: 100%;
}
.width-cent-50 {
  width: 50%;
}
.width-cent-33 {
  width: 33.33%;
}
.width-cent-20 {
  width: 20%;
}

// flex类
.flex.center {
  justify-content: center;
}
.flex.between {
  justify-content: space-between;
}
.flex.start {
  justify-content: start;
}
.flex.align {
  align-items: center;
}
.flex.row {
  flex-direction: row;
}
.flex.col {
  flex-direction: column;
}
.flex.wrap {
  flex-wrap: wrap;
}
.flex.row-start {
  align-items: flex-start;
}
.flex.row-end {
  align-items: flex-end;
}
// 布局
.border-box {
  box-sizing: border-box;
}

// padding
.padding {
  padding: $space;
}
.padding-small {
  padding: $space-small;
}
.padding-large {
  padding: $space-large;
}
.padding-col {
  padding-left: $space;
  padding-right: $space;
}
.padding-row {
  padding-top: $space;
  padding-bottom: $space;
}
.padding-col-large {
  padding-left: $space-large;
  padding-right: $space-large;
}
.padding-row-large {
  padding-top: $space-large;
  padding-bottom: $space-large;
}
.padding-col-small {
  padding-left: $space-small;
  padding-right: $space-small;
}
.padding-row-small {
  padding-top: $space-small;
  padding-bottom: $space-small;
}
.padding-left-0 {
  padding-left: 0;
}
.padding-right-0 {
  padding-right: 0;
}
.padding-top-0 {
  padding-top: 0;
}
.padding-bottom-0 {
  padding-bottom: 0;
}

// margin
.margin {
  margin: $space;
}
.margin-small {
  margin: $space-small;
}
.margin-large {
  margin: $space-large;
}
.margin-col {
  margin-left: $space;
  margin-right: $space;
}
.margin-row {
  margin-top: $space;
  margin-bottom: $space;
}
.margin-col-large {
  margin-left: $space-large;
  margin-right: $space-large;
}
.margin-row-large {
  margin-top: $space-large;
  margin-bottom: $space-large;
}
.margin-col-small {
  margin-left: $space-small;
  margin-right: $space-small;
}
.margin-row-small {
  margin-top: $space-small;
  margin-bottom: $space-small;
}
.margin-left-0 {
  margin-left: 0;
}
.margin-right-0 {
  margin-right: 0;
}
.margin-top-0 {
  margin-top: 0;
}
.margin-bottom-0 {
  margin-bottom: 0;
}
// 用于文字的小间隔margin
.margin-top-min {
  margin-top: $space-min;
}
.margin-bottom-min {
  margin-top: $space-min;
}

// 圆角
.border-radius {
  border-radius: 16rpx;
}

// 其他
.overflow-atuo {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.hidden {
  display: none;
}

.fs-24 {
  font-size: 24rpx;
}
.fs-28 {
  font-size: 28rpx;
}
.fs-32 {
  font-size: 32rpx;
}
.fs-40 {
  font-size: 40rpx;
}
.mg-r-8 {
  margin-right: 8rpx;
}
.mg-r-12 {
  margin-right: 12rpx;
}
.mg-b-24 {
  margin-bottom: 24rpx;
}
.mg-b-20 {
  margin-bottom: 20rpx;
}
.mg-t-22 {
  margin-top: 22rpx;
}
.mg-t-24 {
  margin-top: 24rpx;
}
.mg-b-36 {
  margin-bottom: 36rpx;
}
.hidden{
    display: none;
}

.mg-t-10 {
	margin-top: 10rpx;
}
.mg-t-20 {
	margin-top: 20rpx;
}
.fs-24 {
	font-size: 24rpx;
}
.fs-32 {
	font-size: 32rpx;
}
.fs-52 {
	font-size: 52rpx;
}
